<script setup lang="ts">
import useBiliStore from "@/store/modules/useBiliStore";
import useUserStore from "@/store/modules/useUserStore";
import MSongPlugin from "./MSongPlugin.vue";

const biliStore = useBiliStore(),
  userStore = useUserStore();
const showSong = ref(false),
  sPlugin = biliStore.songPlugin;

function noop() {}
function clickPlugin() {
  //window.$message.warning("开发中...");
  showSong.value = true;
}
function openSongWin() {
  window.electronAPI.createWindow("/plugins/song", {
    width: 300,
    height: 500,
    minWidth: 300,
    minHeight: 500,
    alwaysOnTop: true,
    transparent: true,
    backgroundColor: "#AAffffff"
  });
}
</script>

<template>
  <div
    class="flex flex-col w-50 h-30 p-4 border-2 border-solid border-gray-200 rounded-lg shadow-md shadow-gray-100"
    :class="[sPlugin.enabled ? 'shadow-red-100 border-red-200' : '']"
    @click="clickPlugin"
  >
    <div class="text-lg font-bold">点歌姬</div>
    <div class="flex-1">
      <n-ellipsis :line-clamp="2" :tooltip="{ placement: 'top' }">
        发送弹幕进行排队点歌,弹幕格式:点歌 歌名 歌手,文件格式:歌手 -
        歌名.(mp3|wav),注:空格为英文空格。
      </n-ellipsis>
    </div>
    <div class="flex-ec">
      <n-button
        class="mb-2"
        type="primary"
        round
        size="small"
        @click.stop="openSongWin"
        >召唤</n-button
      >
    </div>
  </div>
  <MSongPlugin v-model:show="showSong" />
</template>

<style scoped lang="scss"></style>
